<template>
  <div class="payInfo">
    <div class="payInfo-header" v-if="!readonly">
      <el-button type="primary" size="small" @click="addEmptyRow">新增</el-button>
    </div>
    <vxe-table
      border
      stripe
      ref="tableRef"
      size="small"
      header-align="center"
      :data="tableData"
    >
      <vxe-column type="seq" width="50" title="序号" align="center" fixed="left" />
      <vxe-column v-if="!readonly" width="80" title="操作" align="center" fixed="left">
        <template #default="{ rowIndex }">
          <el-button size="mini" type="text" @click="handleDelete(rowIndex)">删除</el-button>
        </template>
      </vxe-column>
      <vxe-column field="payWay" title="支付方式" align="center">
        <template #default="{ row }">
          <el-input v-if="!readonly" v-model="row.payWay" size="mini" placeholder="请输入支付方式" />
          <span v-else>{{ row.payWay || '-' }}</span>
        </template>
      </vxe-column>
      <vxe-column field="payAmount" title="支付金额" align="center">
        <template #default="{ row }">
          <el-input-number v-if="!readonly" v-model="row.payAmount" size="mini" :min="0" :step="0.01" placeholder="请输入金额" />
          <span v-else>{{ row.payAmount || '-' }}</span>
        </template>
      </vxe-column>
      <vxe-column field="payTime" title="支付时间" align="center" >
        <template #default="{ row }">
          <el-date-picker v-if="!readonly" v-model="row.payTime" type="datetime" size="mini" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择时间"  />
          <span v-else>{{ row.payTime || '-' }}</span>
        </template>
      </vxe-column>
      <vxe-column field="tradeAccount" title="交易号" align="center" >
        <template #default="{ row }">
          <el-input v-if="!readonly" v-model="row.tradeAccount" size="mini" placeholder="请输入交易号" />
          <span v-else>{{ row.tradeAccount || '-' }}</span>
        </template>
      </vxe-column>
      <vxe-column field="payAccount" title="账号" align="center" >
        <template #default="{ row }">
          <el-input v-if="!readonly" v-model="row.payAccount" size="mini" placeholder="请输入账号" />
          <span v-else>{{ row.payAccount || '-' }}</span>
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script>
import {
  listPayByOrderId
} from "@/api/mes/sales/saleOrder";
export default {
  name: 'payInfo',
  data() {
    return {
      tableData: [],
    };
  },
  props: {
    readonly: {
      type: Boolean,
      default: false
    },
    cellId: {
      type: String,
      default: ''
    }
  },
  watch: {
    cellId: {
      immediate: true,
      handler(newVal) {
        if (newVal && newVal !== 'add') {
          listPayByOrderId(newVal).then(res => {
            if (res.code === 200) {
              this.tableData = res.data;
            }
          })
        } else {
          this.tableData = [];
        }
      }
    }
  },
  methods: {
    addEmptyRow() {
      // 触发响应式，避免直接 push 导致视图不更新
      this.tableData = this.tableData.concat([{
        payWay: '',
        payAmount: 0,
        payTime: '',
        tradeAccount: '',
        payAccount: '',
      }]);
    },
    handleDelete(rowIndex) {
      this.tableData.splice(rowIndex, 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.payInfo-header {
  margin-bottom: 10px;
}

// 只读模式下的文本样式优化
::v-deep .vxe-body--column {
  .vxe-cell {
    span {
      color: #606266;
      font-size: 13px;
      line-height: 1.4;
      
      &:not(:empty) {
        padding: 2px 4px;
      }
    }
  }
}
</style>

